@import 'colors';
@import 'values';
@import 'fonts';
@import 'mixins';

* {
    margin:  0;
    padding: 0;
}

html {
    height: 100%;

    body{
        height: 100%;
        background:  white;
        color:       $grey;
        font:300 14px 'Titillium Web', Arial, sans-serif;
       
        a {
            &, &:visited {
                color:           $green;
                outline:         none;
                text-decoration: underline
            }
            &:hover {
                text-decoration: none
            }
            img {border:none}
        }
        
        p {
            margin-bottom: 10px
        }
        
        h1 {
            margin: 30px 0 10px;
            font: 20px Cambria,Georgia;
            color:rgba($grey, 0.9);

            &:first-child{margin-top:0}
        }

        form {

        }
        fieldset {
            margin:10px 0;
            border:1px solid rgba($grey, 0.3);
            padding:10px
        }
        legend {
            color:rgba($grey, 0.5);
            padding:0 10px;
            margin:0 10px
        }
        label {
            display:    inline-block;
            width:      120px;
            text-align: right;
            margin:     7px 0;
            cursor:     pointer;
            
            &.auto {width:auto}
        }
        
        textarea {
            @include input;
            width:400px;
            height:100px;
            margin-left:9px
        }

        input {
            @include input;

            &[type=text], &[type=password] {
                border: 1px solid rgba($grey, 0.5)
            }
            &[type=text] {
                &.small  {width:80px}
                &.medium {width:150px}
                &.large  {width:400px}
            }
                
            &[type=checkbox] {width:auto}
            
            &.form-error {
                border-color: $red;
            }
            &.price, &.number {
                width:60px;
                text-align:right
            }
            &.datepicker {
                width:70px;
                text-align:center
            }

            &.ui-autocomplete-loading {
                background-image:image-url('loading.gif');
                background-repeat:no-repeat;
                background-position:99% center
            }
        }

        button {
            @include input;
            width:         auto;
            border:        0 solid rgba($grey, 0.5);
            border-left-color: rgba($grey, 0.6);
            border-right-color: rgba($grey, 0.5);
            border-radius: 3px;
            background:    rgba($grey, 0.3);
            background:    linear-gradient(rgba($grey,0.3), rgba($grey,0.5));
            color:         white;
            cursor:        pointer;
            padding:       5px;
            
            &:hover {
                background: rgba($grey, 0.5);
                background: linear-gradient(rgba($grey, 0.4), rgba($grey, 0.7));
            }
            &[type=submit] {
                background: rgba($blue-light, 0.8);
                background: linear-gradient(rgba($blue-light, 0.8), $blue-light);

                &:hover {
                    background: $blue-light;
                    background: linear-gradient($blue-light, $blue);
                }
            }
            &.delete {
                background: rgba($red, 0.7);
                background: linear-gradient(rgba($red, 0.7), rgba($red, 0.8));
                border-color: rgba($red, 0.9);

                &:hover {
                    background: rgba($red, 0.8);
                    background: linear-gradient(rgba($red, 0.8), rgba($red, 0.9));
                    border-color: $red;
                }
            }
            &.green {
                background: rgba($green, 0.7);
                background: linear-gradient(rgba($green, 0.7), rgba($green, 0.8));
                border-color: rgba($green, 0.9);

                &:hover {
                    background: rgba($green, 0.8);
                    background: linear-gradient(rgba($green, 0.8), rgba($green, 0.9));
                    border-color: $green
                }
            }
        }
        .button-set {
            button {
                margin:             0;
                border-radius:      0;
                border-right-width: 1px;
                border-left-width:  1px;

                &:first-child {
                    border-radius: 3px 0 0 3px
                }
                &:last-child {
                    border-radius: 0 3px 3px 0
                }
            }
        }

        .left{float:  left}
        .right{float: right}
        .clear{clear: both}

        .text-left{text-align:   left}
        .text-center{text-align: center}
        .text-right{text-align:  right}

        .loading {
            background-image:image-url('loading.gif') !important;
            background-repeat:no-repeat !important;
            background-position: center center !important;

            * {visibility:hidden}
        }

        .span25p {width:25%}

        .dashboard-item {
            float:left;
            width:450px;
            height:300px;
            overflow:auto;
            border:1px solid rgba($grey, 0.3);
            margin:0 10px 10px 0;
            padding:10px;
            font-size:11px
        }

        header {
            padding:    10px 0 5px;
            background: $blue-dark;
            color:      white;
            float:      left;
            width:      100%;
            box-shadow: inset 0 -2px 3px rgba(black, 0.7);

            a, a:visited {color: $orange}
        }

        #logo {
            float:  left;
            margin: 0 30px 0 10px
        }

        #menu {
            ul {
                list-style: none;
                margin:     10px 0 20px 0;
                font-size:  16px;
                float:      left;

                li {
                    float:        left;
                    margin-right: 2px;

                    a, strong {
                        display:         block;
                        font-weight:     normal;
                        padding:         7px 10px;
                        text-transform:  uppercase;
                        text-decoration: none;
                        border-radius:   4px;
                    }

                    a {
                        color: white;

                        &:hover {
                            text-decoration:  none;
                            background-color: $blue-light;
                        }
                    }

                    strong {
                        background:    white;
                        color:         black;
                    }

                    ul {
                        position:absolute;
                        background:$blue-light;
                        padding:5px 10px;
                        border-radius:0 4px 4px 4px;
                        box-shadow:2px 2px 2px #555;
                        display:none;
                        margin-top:0;
                        min-width:120px;
                    
                        li {
                            display:block;
                            float:none;

                            a:hover {
                                background:rgba(white,0.3)
                            }
                        }
                    }

                    &:hover {
                        a {
                            text-decoration:  none;
                            background-color: $blue-light
                        }
                        ul {
                            display:block;
                        }
                    }

                    &.sub {
                        >a {
                            border-radius: 4px 4px 0 0;
                            background-image:image-url('menu-sub.png');
                            background-repeat:no-repeat;
                            background-position: 95% center;
                            padding-right:20px
                        }
                        >strong{
                            background-image:image-url('menu-sub-h.png');
                            background-repeat:no-repeat;
                            background-position: 95% center;
                            padding-right:20px
                        }
                    }
                }
            }
        }
        
        
        #user-box {
            float:        right;
            text-align:   right;
            margin-right: 10px;
        
            h2 {
                margin:      5px 0;
                font-weight: normal
            }
            .image{
                margin-left: 10px
            }
        }

        #flashMessageContainer {
            position:   absolute;
            margin-top: -20px;
            left:       0;
            width:      100%;
            text-align: center
        }
        #flashMessage {
            .message {
                padding:    10px;
                background: $yellow;
                box-shadow: 0 0 3px black
            }
            &.ok .message {
                background: $green;
                color:      white
            }

            &.error .message {
                background: $red;
                color:      white;
            }
        }
            
        .error-container {
            position: relative;

            .error-message {
                position:   relative;
                background: $red;
                color:      white;
                padding:    3px 6px;
                border-radius: 3px;

                &:after {
                    right:          100%;
                    border:         solid transparent;
                    content:        " ";
                    height:         0;
                    width:          0;
                    position:       absolute;
                    pointer-events: none;
                    
                    border-right-color: $red; 
                    border-width: 6px;
                    top: 50%; 
                    margin-top: -6px;
                }
            }
        }

        #content {
            padding:    20px;
            clear:      both;
            margin-top: 20px;

            h1:first-child{margin-top:0}
        }
            
        .entity-table {
            width:           100%;
            border-collapse: collapse;
            clear:both;

            tr {
                th {
                    color:         white;
                    padding:       5px 10px;
                    text-align:    left;
                    border-bottom: 3px double rgba($grey, 0.8);
                    background:    rgba($grey, 0.6);

                    a {
                        text-decoration: none;
                        color:           white;

                        &:after {
                            font-size:0.8em
                        }
                        &.asc:after {
                            content: "\25BC"
                        }
                        &.desc:after {
                            content: "\25B2"
                        }
                    }

                    &.text-right {
                        text-align:right
                    }

                    &.second {
                        background:#3B8ACE
                    }
                }

                td {
                    padding: 5px 5px;
                    vertical-align:top;

                    &.second {
                        background: rgba($blue-light, 0.5);

                        a{
                            color:$blue-darker
                        }
                    }
                }

                .actions {
                    text-align: right;

                    button {
                        padding:   2px;
                        font-size: 11px
                    }

                    * {visibility: hidden}

                    &.form button {
                        margin:0
                    }
                    &.visible *{
                        visibility: visible;
                    }
                }
                
                &.filter {
                    th {
                        background: rgba($grey, 0.6);
                        border:     none;
                        padding:    0 10px
                    }
                    button {
                        padding:2px 4px
                    }
                    input {
                        margin: 0
                    }
                }

                &.error {
                    td{
                        background:$red;
                        color:white
                    }
                    a{
                        color:white
                    }
                }

                &.total {
                    font-weight:bolder;
                    
                    td {border-top:3px double black}

                    &.sub td {
                        border:none
                    }
                }

                &.spaned {
                    th {
                        border:none;
                        text-align:center
                    }
                }

                &:nth-child(2n) {
                    td {
                        background:rgba($grey, 0.2);

                        &.second {background:rgba($blue-light, 0.5)}
                    }

                    &:hover td.second {
                        background:$blue-light;
                    }
                }
                &:hover {
                    td {
                        background:$blue;
                        color: white;

                        * {color:white}
                    }

                    .actions {
                        * {visibility:visible}
                    }

                    a {
                        color:white;
                    }

                    .status { border-color:white}
                }
            }
        }
            
        .entity-filter {
            list-style:none;
            float:left;
            width:100%;

            li {
                display:block;
                float:left;
                background:rgba($grey, 0.3);
            }

            a, strong {
                display:block;
                color: white;
                text-decoration:none;
                padding:5px 10px;
                box-shadow:inset 0 -2px 2px rgba($grey, 0.8)
            }

            a:hover {color:black}
            strong {
                background:rgba($grey, 0.6);
                box-shadow:none
            }
        }

        .filter-form {
            background:rgba($grey, 0.3);
            float:left;
            width:100%;
            
            input, select {
                margin:5px 0
            }
            input[type=submit], .submit{
                width:auto;
                clear:none;
                float:right;
            }

            .filter-form input[type=submit] {
                margin-right:5px;
                background:$blue-light;
                background:linear-gradient(rgba($blue-light,0.8), $blue-light);
                color:white;
                cursor:pointer;
                border:none;border-radius:3px;

                &:hover {
                    background:$blue-light;
                    background:linear-gradient($blue-light, $blue);
                }
            }

            .cancel {
                background:transparent;
                font-weight:bolder;
                color:white;
                float:right;
                border:none;
                width:auto;
                cursor:pointer
            }
            label{
                width:auto;
                margin-left:10px
            }
        }
              

        .pagination {
            padding-top: 10px;
            border-top:  3px double rgba($grey, 0.8);
            text-align:  center;

            a {
                &, &:visited {
                    text-decoration: none;
                    color:           rgba($grey, 0.5)
                }
                &:hover {
                    color: $grey
                }
                &[rel=first] {
                    margin-right:20px
                }
                &[rel=last] {
                    margin-left:20px
                }
            }
            .current {
                font-size:   1.1em;
                font-weight: bolder
            }
        }
            
        .photo-list {
            list-style:none;
            float:left;

            li {
                float:left;
                width:100px;
                height:100px;
                border:1px solid rgba($grey, 0.3);
                margin:0 1px 1px 0;
                position:relative;

                &.control {
                    width:auto
                }

                &:first-child .remove {
                    display:none
                }
            }
            .remove {
                z-index:2;
                position:absolute;
                width:10px;
                height:10px;
                font-size:10px;
                font-weight:bolder;
                right:2px;
                top:2px;
                line-height:7px;
                color:white;
                background:$red;
                text-align:center;
                text-decoration:none
            }
        }

        .upload-wrap {
            width:100px;
            height:100px;
            position:relative;
            float:left;
            border-left:1px dotted rgba($grey, 0.3);

            .add, .pick{
                position:absolute;
                left:0;
                top:0;
                width:100%;
                height:100%;
                text-align:center;
                line-height:100px;
                font-size:30px;
                font-weight:bolder;
                text-decoration:none;
                color:rgba($grey, 0.3);
                z-index:1
            }

            .add:hover, .pick:hover{
                color:white;
                background:$blue-light
            }
            
            &.selected .pick {
                background:image-url('selected.png') no-repeat center center;
                color:transparent
            }
            &:first-child{border:none}
        }

        .status {
            display:block;
            float:left;
            margin-right:3px;
            width:16px;
            height:16px;
            background:transparent;
            border-radius:8px;
            border:1px solid transparent;

            &.free     { background:$green }
            &.occupied { background:$red }
            &.reserved { background:$orange }
        }
    }
}